
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link rel="stylesheet"
	href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引用Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/javascript" src="../js/axios.js"></script>
<script type="text/javascript" src="../js/qs.js"></script>
<link rel="stylesheet" type="text/css" href="css/productdesc.css" />
</head>

<body class="bg-lightbule">
	<div class="enlarged forced" id="wrapper">
		<div class="m-t-20" id="desc">
			<div class="container-fluid">
				<div class="row" style="height:auto">
					<div class="col-md-8">
						<div id="qshow" style="z-index: 0">
							<div class="portlet form-horizontal border-n">
								<div class="portlet-heading portlet-default">
									<div class="pull-right  f-s-12">
										<a><button class="btn btn-white" @click="delgood(goo_id)">
											<i class="el-icon-delete m-r-5"></i>删除
										</button></a>
										&nbsp;
										<button class="btn btn-white" @click="editgood(goo_id)">
											<i class="el-icon-edit m-r-5"></i>编辑
										</button>
										&nbsp;
									</div>
									<h4 class="modal-title text-dark">
										<a href="/glist"><span>产品信息</span></a>
									</h4>
									<hr class="border-t-a">
								</div>
								<div class="gedit_scroll_content" style="height:280px">
									<div class="panel-collapse collapse in" id="bg-default">
										<div class="portlet-body p-t-0 p-r-7 show-box">
											<div class="row">
												<div class="col-md-6">
													<div class="form-group ">
														<label class="control-label col-md-4">品名:</label>
														<div class="form-control  col-md-8">${good.goo_name}</div>
													</div>
												</div>
												<div class="col-md-6">
													<div class="form-group ">
														<label class="control-label col-md-4">分类:</label>
														<div class="form-control  col-md-8">${good.cat_name }</div>
													</div>
												</div>

											</div>

											<div class="row">
												<div class="col-md-6">
													<div class="form-group ">
														<label class="control-label col-md-4">价格:</label>
														<div class="form-control  col-md-8">
															<span style="white-space: nowrap"><span
																style="font-size: 9pt; font-weight: normal;">￥</span>${good.goo_price}</span>
														</div>
													</div>
												</div>
												<div class="col-md-6">
													<div class="form-group ">
														<label class="control-label col-md-4">状态:</label>
														<div class="form-control  col-md-8">${good.status }</div>
													</div>
												</div>
											</div>
											<div class="row">
												<div class="col-md-6">
													<div class="form-group ">
														<label class="control-label col-md-4">库存:</label>
														<div class="form-control  col-md-8">${good.goo_spec}</div>
													</div>
												</div>
												<div class="col-md-6">
													<div class="form-group ">
														<label class="control-label col-md-4">单位:</label>
														<div class="form-control  col-md-8">${good.gunit }</div>
													</div>
												</div>
											</div>
											<el-form ref="form" :model="form" label-width="80px" class="idid">
											<div class="row">
												<div class="col-md-12">
													<div class="form-group no-margin">
														<label class="control-label col-md-2">产品图片:</label>
														<div class="form-control autogrow col-md-10">
															<!-- <img v-if="imageUrl" :src="../${good.goo_img}"
																style="width: 70px; height: 70px" /> 
																 <img  :src="imageUrl" class="avatar"
																style="width: 70px; height: 70px"> -->
																
																
																<img v-if="imageUrl" :src="imageUrl"
																style="width: 70px; height: 70px" />
														</div>
													</div>
												</div>
												
											<el-form-item>
  												<el-upload
  									action="/upload?gid=${good.goo_id }"
  									:show-file-list="false"
  									:on-success="handleAvatarSuccess"
  									:before-upload="beforeAvatarUpload"
  									:on-preview="handlePreview"
  									:on-remove="handleRemove"
  									:before-remove="beforeRemove"
  									multiple
  									:limit="3"
  									:on-exceed="handleExceed"
  									:file-list="fileList"> 
  									 
  									<el-button size="small" type="primary">点击上传</el-button>
  									<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
								 </el-form-item>
								 </el-upload>
											
											</div>
											</el-form>
											<!--UTF8-->
										</div>
									</div>
								</div>
								<div class="text-right p-20">
									<a><button class="btn btn-white" @click="delgood(goo_id)">
											<i class="el-icon-delete m-r-5"></i>删除
										</button></a>
										&nbsp;
										<button class="btn btn-white" @click="editgood(goo_id)">
											<i class="el-icon-edit m-r-5"></i>编辑
										</button>
										&nbsp;
								</div>
							</div>
							<!--UTF8-->
						</div>
					</div>
				</div>
				<div id="subproduct" style="z-index: 0">
					<div class="panel panel-default">
						<div class="panel-body bootstrap-table" style="margin-top: 20px">
							<table class="table-bordered  table table-hover">
								<thead>
									<tr>
										<th class="th-inner ">ID</th>
										<th class="th-inner ">数量</th>
										<th class="th-inner ">单位</th>
										<th class="th-inner ">价格</th>
										<th class="th-inner ">操作</th>
									</tr>
								</thead>
								<tbody>

									<tr>
										<td><a>${good.goo_id }▲</a>
										</td>
										<td>${good.goo_spec}</td>
										<td>${good.gunit }</td>
										<td><span style="white-space: nowrap"><span
												style="font-size: 9pt; font-weight: normal;">￥</span>${good.goo_price }</span>
										</td>
										<td><a style="cursor:pointer">视图</a>
											<a style="cursor:pointer" @click="editgood(goo_id)">编辑</a>
											<a style="cursor:pointer" @click="delgood(goo_id)">删除</a></td>
									</tr>

								</tbody>
							</table>
																		<el-dialog title="提示" :visible.sync="dialogVisible"
																			width="30%"> <span>您确认要删除此记录吗？</span> <span
																			slot="footer" class="dialog-footer"> <el-button
																				@click="dialogVisible = false">取 消</el-button> <el-button
																				type="primary" @click="update(${good.goo_id })">确
																			定</el-button>

																		</span> </el-dialog>
						</div>
					</div>
	
					<!-- <div class="panel panel-default">
						<div class="panel-heading bg-white">
							<h5 class="panel-title">本产品全部规格库存：</h5>
						</div>
						<div class="panel-body bootstrap-table">
							<table class="table-bordered  table table-hover">
								<thead>
									<tr>
										<th class="th-inner ">规格</th>
										<th class="th-inner ">单位</th>
										<th class="th-inner ">全国仓库</th>
										<th class="th-inner ">北京仓库</th>
										<th class="th-inner ">上海仓库</th>
										<th class="th-inner ">超大规模磷酸二酯酶压顶封顶李厚霖有机硅松井石根有机硅李厚霖在地愿为连理枝封顶fds</th>
										<th class="th-inner ">柘城有机硅为人温柔温热我热我认为热望热热我</th>
										<th class="th-inner ">李厚霖原原本本压顶霜霜标杆dsfd</th>
										<th class="th-inner ">柘城压顶无可奈何花落去李厚霖老板椅f</th>
										<th class="th-inner ">磷酸二酯酶压顶无可奈何花落去李厚霖夺</th>
										<th class="th-inner ">23</th>
										<th class="th-inner ">23432</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td>-</td>
										<td></td>
										<td>&nbsp;</td>
										<td>&nbsp;</td>
										<td>&nbsp;</td>
										<td>&nbsp;</td>
										<td>&nbsp;</td>
										<td>&nbsp;</td>
										<td>&nbsp;</td>
										<td>&nbsp;</td>
										<td>&nbsp;</td>
										<td>&nbsp;</td>
									</tr>
									<tr>
										<td>按基准合计</td>
										<td></td>
										<td align="right"><b>0</b></td>
										<td align="right"><b>0</b></td>
										<td align="right"><b>0</b></td>
										<td align="right"><b>0</b></td>
										<td align="right"><b>0</b></td>
										<td align="right"><b>0</b></td>
										<td align="right"><b>0</b></td>
										<td align="right"><b>0</b></td>
										<td align="right"><b>0</b></td>
										<td align="right"><b>0</b></td>
									</tr>
								</tbody>
							</table>
						</div>
					</div> -->
					<!--UTF8-->
				</div>

				<!-- <div id="product_customer" style="z-index: 0">
					<div class="row row-display-box">
						<div class="col-md-4  panel panel-default p-0">

							<div class="panel-heading bg-white">
								<h5 class="panel-title">
									<i class="fa fa-heart m-r-5"></i><b>关注</b>该产品的客户
								</h5>
							</div>
							<div class="panel-body">

								<p class="text-gray f-s-12">(已向客户报价)</p>
							</div>

						</div>
						<div class="col-md-4  panel panel-default p-0">

							<div class="panel-heading bg-white">
								<h5 class="panel-title">
									<i class="fa fa-cart-arrow-down m-r-5"></i><b>购买</b>该产品的客户
								</h5>
							</div>
							<div class="panel-body">
								<i class="fa fa-square text-gray m-r-5"></i><span
									style="font-weight: normal; color: #9e9e9e">〖</span>宏远 <a
									href="javascript:vopen('/xcrm/customer/customer/detail.xt?id=84','customer84',999,600);"><i
									class="fa fa-folder-open m-l-5" data-original-title="打开详细页面"
									data-toggle="tooltip" data-placement="bottom"></i></a><span
									style="font-weight: normal; color: #9e9e9e">〗</span><br>
								<p class="text-gray f-s-12">(合同交付/发货明细包含)</p>
							</div>

						</div>
						<div class="col-md-4  panel panel-default p-0">

							<div class="panel-heading bg-white">
								<h5 class="panel-title">
									<i class="fa fa-truck m-r-5"></i><b>供应</b>该产品的供应商
								</h5>
							</div>
							<div class="panel-body">
								<table></table>
								<p class="text-gray f-s-12">(客户视图内，供货产品包含)</p>
							</div>
						</div>
					</div>
					<div class="row row-display-box">
						<div class="col-md-4  panel panel-default p-0">

							<div class="panel-heading bg-white">
								<h5 class="panel-title">
									<i class="fa fa-wrench m-r-5"></i><b>维修</b>该产品的客户
								</h5>
							</div>
							<div class="panel-body">

								<p class="text-gray f-s-12">(已接受客户的维修工单)</p>
							</div>

						</div>
						<div class="col-md-4  panel panel-default p-0">

							<div class="panel-heading bg-white">
								<h5 class="panel-title">
									<i class=" ti-share-alt m-r-5"></i><b>退过</b>该产品的客户
								</h5>
							</div>
							<div class="panel-body">
								<i class="fa fa-square text-gray m-r-5"></i><span
									style="font-weight: normal; color: #9e9e9e">〖</span>宏远 <a
									href="javascript:vopen('/xcrm/customer/customer/detail.xt?id=84','customer84',999,600);"><i
									class="fa fa-folder-open m-l-5" data-original-title="打开详细页面"
									data-toggle="tooltip" data-placement="bottom"></i></a><span
									style="font-weight: normal; color: #9e9e9e">〗</span><br>
								<p class="text-gray f-s-12">(订单退货)</p>
							</div>

						</div>
						<div class="col-md-4  panel panel-default p-0">

							<div class="panel-heading bg-white">
								<h5 class="panel-title">
									<i class="fa fa-truck m-r-5"></i><b>采购过</b>该产品的供应商
								</h5>
							</div>
							<div class="panel-body">
								<table></table>
								<p class="text-gray f-s-12">(已采购入库)</p>
							</div>

						</div>
					</div>
					UTF8
				</div> -->
			</div>
			<el-dialog :visible.sync="centerDialogVisible4" width="900px" center>
								<iframe :src="FrameSrc" width="100%" onload="this.height=this.contentWindow.document.body.scrollHeight,this.width = this.contentWindow.document.body.scrollWidth" frameborder="0" scrolling="no"></iframe>
									</el-dialog>
		</div>
	</div>
		<script>
  var vm =  new Vue( {
	  el:"#desc",
    	data() {
      return {
    	  dialogVisible:false,
    	  centerDialogVisible4:false,
    	  FrameSrc:"",
    	  form: {
             file:''
            },
    	  imageUrl:''
      
      };
    },
    methods: {
    	 editgood(id){
    		 	var id = ${good.goo_id};
	    	    this.centerDialogVisible4 = true;
				this.FrameSrc="/goodEditor?id="+id;
		}, 
    	
    	delgood:function(goo_id){
	    	this.dialogVisible = true;
	      },
	      update: function(i) {
	    	  var i = ${good.goo_id};
	    	  axios.post("/delgood",
	           			//参数转换
	           			Qs.stringify({'goo_id':i},{arrayFormat: 'brackets'})
	           			//ajax请求成功的回调函数
	           			).then(function(v){
		           			window.location.replace("/glist");
		           			console.log("回调成功，获取了服务器端返回的值v");
		           	}).catch(function(e){
		           		alert("出错了"+e);
		           	});
			},
    	handleAvatarSuccess(res, file) {
    		
            this.imageUrl = URL.createObjectURL(file.raw);
            this.form.file = file;
          },
          beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
              this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
              this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
          },
          submitForm(formName) {
				
			
						//post提交数据
						axios.post("/upload",
							//参数转换
							Qs.stringify(this.form, {
								arrayFormat: 'brackets'
							})
							//	params:
							//ajax请求成功的回调函数
						).then(function(v) {
							window.parent.location.replace("/glist");
							alert("ok");
						}).catch(function() {
							alert("出错了");
						});

			}
    },
    mounted(){
    	 var good = ${good};
    	 this.imageUrl = good.goo_img;
    }
  });
</script>
</body>


</html>